<script lang="ts" setup>
import type { Nullable } from '@vben/types';

import type {
  ContextMenuItem,
  TreeActionItem,
  TreeActionType,
} from '#/components/tree';

import { h, ref, unref } from 'vue';

import { Page } from '@vben/common-ui';

import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { Col, Row } from 'ant-design-vue';
import consola from 'consola';

import { BasicTree } from '#/components/tree';
import { useMessage } from '#/hooks/web/useMessage';

import { treeData, treeData2, treeData3 } from './data';

defineOptions({
  name: 'CompBasic',
});

function handlePlus(node: any) {
  consola.log(node);
}

function getRightMenuList(node: any): ContextMenuItem[] {
  return [
    {
      label: '新增',
      handler: () => {
        consola.log('点击了新增', node);
      },
      icon: 'bi:plus',
    },
    {
      label: '删除',
      handler: () => {
        consola.log('点击了删除', node);
      },
      icon: 'bx:bxs-folder-open',
    },
  ];
}
const actionList: TreeActionItem[] = [
  {
    // show:()=>boolean;
    render: (node) => {
      return h(PlusOutlined, {
        class: 'ml-2',
        onClick: () => {
          handlePlus(node);
        },
      });
    },
  },
  {
    render: (node) => {
      return h(DeleteOutlined, {
        class: 'ml-2',
        onClick: () => {
          handlePlus(node);
        },
      });
    },
  },
];

const treeRef = ref<Nullable<TreeActionType>>(null);
const { createMessage } = useMessage();

function getTree() {
  const tree = unref(treeRef);
  if (!tree) {
    throw new Error('tree is null!');
  }
  return tree;
}

function handleLevel(level: number) {
  getTree().filterByLevel(level);
}

function handleSetCheckData() {
  // setCheckedKeys 方法只会根据你传入的参数进行设置，
  // 鼠标勾选复选框时，会根据是否级联选择，将子节点一并设置
  getTree().setCheckedKeys(['0-0']);
}

function handleGetCheckData() {
  const keys = getTree().getCheckedKeys();
  createMessage.success(JSON.stringify(keys));
}

function handleSetSelectData() {
  getTree().setSelectedKeys(['0-0']);
}

function handleGetSelectData() {
  const keys = getTree().getSelectedKeys();
  createMessage.success(JSON.stringify(keys));
}

function handleGetSelectNode() {
  const keys = getTree().getSelectedKeys();
  const node = getTree().getSelectedNode(keys[0] as string);
  createMessage.success(node === null ? null : JSON.stringify(node));
}

function handleSetExpandData() {
  getTree().setExpandedKeys(['0-0']);
}

function handleGetExpandData() {
  const keys = getTree().getExpandedKeys();
  createMessage.success(JSON.stringify(keys));
}

function checkAll(checkAll: boolean) {
  getTree().checkAll(checkAll);
}

function expandAll(checkAll: boolean) {
  getTree().expandAll(checkAll);
}

function appendNodeByKey(parentKey: null | string = null) {
  getTree().insertNodeByKey({
    parentKey,
    node: {
      title: '新增节点',
      key: '2-2-2',
    },
    // 往后插入
    push: 'push',
    // 往前插入
    // push:'unshift'
  });
}

function deleteNodeByKey(key: string) {
  getTree().deleteNodeByKey(key);
}

function updateNodeByKey(key: string) {
  getTree().updateNodeByKey(key, {
    title: 'parent2-new',
  });
}

function createIcon({ level }: { level: number }) {
  if (level === 1) {
    return 'ion:git-compare-outline';
  }
  if (level === 2) {
    return 'ion:home';
  }
  if (level === 3) {
    return 'ion:airplane';
  }
  return '';
}
</script>

<template>
  <Page title="BasicTitle">
    <Row :gutter="[16, 16]">
      <Col :span="8">
        <BasicTree
          title="右侧操作按钮/自定义图标/右键菜单"
          help-message="帮助信息"
          :tree-data="treeData"
          :before-right-click="getRightMenuList"
          :action-list="actionList"
          :render-icon="createIcon"
        />
      </Col>
      <Col :span="8">
        <BasicTree
          title="右键菜单/工具栏"
          toolbar
          checkable
          search
          :tree-data="treeData"
          :before-right-click="getRightMenuList"
        />
      </Col>
      <Col :span="8">
        <BasicTree
          title="字段重命名"
          :tree-data="treeData3"
          :action-list="actionList"
        >
          <template #title="item"> 我是插槽：{{ item.name }} </template>
        </BasicTree>
      </Col>
      <Col :span="8">
        <BasicTree
          title="插槽"
          :tree-data="treeData3"
          :action-list="actionList"
        >
          <template #title="item"> 我是插槽：{{ item.name }} </template>
        </BasicTree>
      </Col>

      <Col :span="8">
        <!-- <BasicTree
          title="这个例子会报错"
          :field-names="{ title: 'name' }"
          :tree-data="treeData2"
        >
          <template #title="item"> 插槽：{{ JSON.stringify(item) }} </template>
        </BasicTree> -->
        <BasicTree
          title="fieldNames和插槽同时存在会报错，请看代码"
          :tree-data="treeData2"
        >
          <template #title="item"> 插槽：{{ item.name }} </template>
        </BasicTree>
      </Col>

      <Col :span="8">
        <BasicTree
          title="fieldNames + action"
          :tree-data="treeData3"
          :action-list="actionList"
          :field-names="{ key: 'key', title: 'name' }"
        />
      </Col>
      <Col>
        <br />
      </Col>
      <Col>
        <div class="mb-4">
          <a-button @click="expandAll(true)" class="mr-2"> 展开全部 </a-button>
          <a-button @click="expandAll(false)" class="mr-2"> 折叠全部 </a-button>
          <a-button @click="checkAll(true)" class="mr-2"> 全选 </a-button>
          <a-button @click="checkAll(false)" class="mr-2"> 全不选 </a-button>
          <a-button @click="handleLevel(2)" class="mr-2">
            显示到第2级
          </a-button>
          <a-button @click="handleLevel(1)" class="mr-2">
            显示到第1级
          </a-button>
        </div>
        <div class="mb-4">
          <a-button @click="handleSetCheckData" class="mr-2">
            设置勾选数据
          </a-button>
          <a-button @click="handleGetCheckData" class="mr-2">
            获取勾选数据
          </a-button>
          <a-button @click="handleSetSelectData" class="mr-2">
            设置选中数据
          </a-button>
          <a-button @click="handleGetSelectData" class="mr-2">
            获取选中数据
          </a-button>
          <a-button @click="handleGetSelectNode" class="mr-2">
            获取选中节点
          </a-button>

          <a-button @click="handleSetExpandData" class="mr-2">
            设置展开数据
          </a-button>
          <a-button @click="handleGetExpandData" class="mr-2">
            获取展开数据
          </a-button>
        </div>
        <div class="mb-4">
          <a-button @click="appendNodeByKey(null)" class="mr-2">
            添加根节点
          </a-button>
          <a-button @click="appendNodeByKey('2-2')" class="mr-2">
            添加在parent3内添加节点
          </a-button>
          <a-button @click="deleteNodeByKey('2-2')" class="mr-2">
            删除parent3节点
          </a-button>
          <a-button @click="updateNodeByKey('1-1')" class="mr-2">
            更新parent2节点
          </a-button>
        </div>
        <BasicTree
          :tree-data="treeData"
          title="函数操作"
          ref="treeRef"
          :checkable="true"
        />
      </Col>
    </Row>
  </Page>
</template>
